<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机数点名</title>
    <style type="text/css">
        #app {
            background-color: #f7f8fb;
            width: 760px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start
        }
        .item {
            flex: 1;
            width: calc(100%/2);
            min-width: calc(100%/2);
            max-width: calc(100%/2);
        }
        .item:nth-child(-n+2) {
            height: 180px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .item:nth-child(3) {
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
        .item:last-child {
            height: calc(100% - 100px);
        }
        legend {
            margin-bottom: 0;
        }
        #absence_list {
            height: 200px;
            overflow: auto;
        }
        p {
            height: 20px;
            margin-block-start: 0;
            margin-block-end: 0;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="item">
        <button id="start">开始点名</button>
    </div>
    <div class="item">
        <input placeholder="随机数点名" type="text" id="name"></input>
    </div>
    <div class="item">
        <button id="absence" disabled>缺勤</button>
    </div>
    <div class="item">
        <fieldset>
            <legend>缺勤名单</legend>
            <div id="absence_list">
            </div>
        </fieldset>
    </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<script>
    class prng_lcg {
        state
        m = 1664525             // 乘数
        c = 1013904223          // 增量
        n = Math.pow(2, 32)     // 模数
        constructor(seed) {
            this.state = seed
        }
        next() {
            this.state = (this.state * this.m + this.c) % this.n
            return this.state
        }
    }
    seed = 1        // 种子
    // 利用线性同余公式生成随机数序列Xi（不能用rand代码直接生成必须要用公式生成）
    gen = new prng_lcg(seed)
    xi = [...Array(1000).keys()].map(() => gen.next())
    console.log(xi)
    // 设置Yi=（Xi/Xmax）121
    xmax = Math.max(...xi)
    yi = xi.map(it => (it/xmax)*121)
    console.log(yi)
    // 将所得数列进一位取整   ?向上取整?
    yi = yi.map(it => Math.ceil(it))
    console.log(yi)
    // 得到1—121的整数随机序列, 将1-121分别对应121名同学
    ids = []
    for (const it of yi) {
        if (ids.length === 121) { break }
        if (ids.indexOf(it) === -1) {
            ids.push(it)
        }
    }
    console.log(ids)
    let students = ["谢坚","张怡琳","王东升","张星宇","钱宸","赖业优","张小龙","郑好","李翔远","郑肖祥","陈同尧","张正","胡宏涛","万波","林骏","何超毅","罗欢","彭泽凯","左利文","曾一桓","袁崇德","黄志超","曹靖妍","徐淼","李宁轩","杨毅","马宇泉","杜鼎鑫","郝金宇","祖禔阳","蒋佳乐","胡沈飞","周枫华","盛世琪","万彦驰","张卿钰","王林","曾志辉","邓俊扬","钟可睿","揭圣宇","陈子奇","杨海鑫","马立俊","李赫","余匡熠","吴江斌","胡鹏辉","于梦翔","王子一","刘大平","钟颖坚","谢飞","杨建行","朱宇全","胡皓杰","汤军","马慧萍","宁俊伟","李淳忠","王浩泽","谭丞蔚","黄鑫","邓靖川","陈春林","龙富君","王岩涛","赵佳玺","包智文","饶一民","许波","兰心雨","夏然佛","卢黎明","彭永祺","欧阳佳怡","颜雷","徐博","马晨雨","陈鹏德","安玺磊","张时瑞","刘元浩","陈佩奇","王潇宏","刘宇康","许允铮","黄布什","刘国焘","冯政昊","董硕","肖堃","陈豪","赖龙萍","谢志龙","缪润晨","刘强","王锋","张澎","兰华根","谢浩松","杨凡","王旭","江灵","邹月","张安安","魏玮宽","李毅","侯文杰","周沛霖","赵智胜","李嘉煌","陶浙","周雍剑","罗习宾","刘燕","刘金树","张贵程","刘海卫","李想","王学毅",]
    // 先根据seed生成随机点名名单
    let students2 = ids.map(it => students[it-1])
    console.log('最终随机点名顺序, 由lcg的seed决定顺序', students2)

    _index = -1
    let _start = $('#start')
    let _absence = $('#absence')
    _start.click(() => {
        _start.text('下一位')
        $('#name').val(students2[++_index])
        _absence.attr('disabled', false)
        if (_index === students2.length-1) {
            _start.attr('disabled', true)
            _start.text('点名完成')
        }
    })
    _absence.click(() => {
        _absence.attr('disabled', true)
        $('#absence_list').append(`<p>${students2[_index]}</p>`)
    })
</script>
</html>
